import { useState , useEffect } from "react";
import './index.less'
import { View , Input , Icon , Image , Text} from "@tarojs/components";
import Taro,{getCurrentInstance} from "@tarojs/taro";
import http from "../../utils/http";
function Home() {
  const current=getCurrentInstance();
  function randomNum(minNum,maxNum){ 
    return parseInt(Math.random()*(maxNum-minNum+1)+minNum); 
  }
  function randomNotRepeatNum(minNum,maxNum,l){
    let arr=[];
    let num=0;
    while(arr.length<l){
      num=randomNum(minNum,maxNum)
      if(arr.length==0){
        arr.push(num)
      }else{
        for(let j=0;j<arr.length;j++){
          if(num==arr[j]){
            break;
          }else if(j==arr.length-1){
            arr.push(num)
          }
        }
      }
    }
    return arr;
  }
  const [userInfo,setUserInfo]=useState('');
  const [myCourse,setMyCourse]=useState('');
  const [courseList,setCourseList]=useState([]);
  const [oldCourseList,setOldCourseList]=useState([]);
  const [list,setList]=useState([]);
  useEffect(()=>{
    if(list.length){
      Taro.setStorage({
        key:"homeListType",
        data:list
      })
    }
  },[list])
  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (res) {
        setUserInfo(JSON.parse(res.data))
      }
    });
    http({
      url:'/home/getAllCourse'
    }).then(res=>{
      setCourseList(res.data.data)
      setOldCourseList(res.data.data)
    });
    let homeListType=Taro.getStorageSync('homeListType')
    if(homeListType){
      if(current.router.params.type){
        let newList=[...homeListType];
        for(let i=0;i<4;i++){
          if(newList[i]==current.router.params.type){
            newList.splice(i, 1);
            newList.unshift(current.router.params.type);
            break;
          }else if(i==3){
            newList.unshift(current.router.params.type);
            newList.pop();
          }
        }
        setList(newList);
      }else{
        setList(homeListType)
      }
    }else{
      setList(['人力资源','财务','市场','科技'])
    }
  },[]);
  useEffect(()=>{
    userInfo.id && http({
      url:'/home/getMyCourseList',
      data:{
        id:userInfo.id
      }
    }).then(res=>{
      setMyCourse(res.data.data[randomNotRepeatNum(0,res.data.data.length-1,1)])
    });
  },[userInfo]);
  const changeType=(index)=>{
    setCourseList(oldCourseList.filter(v=>v.type==list[index]+'类'))
  }
  return<View id="home">
    <View className="header">主页</View>
    <View className="search">
      <Icon size='14' type='search'/>
      <Input type='text' placeholder='搜索' onFocus={()=>{Taro.navigateTo({url: '/pages/home/search/index'})}}></Input>
    </View>
    <View className="myCourse">
      <Image src={myCourse.course_img_url} onClick={()=>{Taro.navigateTo({url:'/pages/home/course/index?id='+myCourse.id})}}></Image>
    </View>
    <View className="list">
      <View>
        <Text>分类</Text>
        <Text onClick={()=>{Taro.navigateTo({url: '/pages/home/list/index'})}}>更多  》</Text>
      </View>
      <View>
        <View onClick={()=>{changeType(0)}}>{list[0]}</View>
        <View onClick={()=>{changeType(1)}}>{list[1]}</View>
        <View onClick={()=>{changeType(2)}}>{list[2]}</View>
        <View onClick={()=>{changeType(3)}}>{list[3]}</View>
      </View>
    </View>
    {courseList.map((v,i)=><View key={i} className="courseList" onClick={()=>{Taro.navigateTo({url:'/pages/home/course/index?id='+v.id})}}>
      <Image src={v.course_img_url} className="img"></Image>
      <View className="con">
        <Text className="title">{v.title}</Text>
        <Text className="type">培训类型：{v.type}</Text>
      </View>
    </View>)}
  </View>;
}

export default Home;